<template>
	<view class="tab-bar-container">
		<!-- 占位元素，用于撑起页面底部空间 -->
		<!-- <view class="tab-bar-placeholder"></view> -->
		<!-- 原tab-bar内容 -->
		<view class="tab-bar">
			<view v-for="(item,index) in list" :key="index" class="tab-bar-item" @click="switchTab(item, index)">
				<image class="tab_img" :src="currentIndex == index ? item.selectedIconPath : item.iconPath"></image>
				<view class="tab_text" :style="{color: currentIndex == index ? selectedColor : color}">{{item.text}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			selectedIndex: { // 当前选中的tab index
				default: 0
			},
		},
		data() {
			return {
				// borderStyle: "white",
				// backgroundColor: "#ffffff",
				color: "#7D90A9",
				selectedColor: "#0766fd",
				list: [],
				currentIndex: 0,
			}
		},
		created() {
			this.currentIndex = this.selectedIndex;
			console.log('currentIndex111', this.currentIndex)
			var _this = this
			let storage_data = uni.getStorageSync('storage_data').user_roles[0];
			// 管理员
			if (storage_data == 'management') {
				_this.list = [{
					"pagePath": "/pages/index",
					"iconPath": "../../static/images/tabbar/home.png",
					"selectedIconPath": "../../static/images/tabbar/home_.png",
					"text": "人员管理"
				}, {
					"pagePath": "/pages/mine/index",
					"iconPath": "../../static/images/tabbar/mine.png",
					"selectedIconPath": "../../static/images/tabbar/mine_.png",
					"text": "我的"
				}]
			}
			// 发起人
			else if (storage_data == 'create') {
				_this.list = [{
					"pagePath": "/pages/work/index",
					"iconPath": "../../static/images/tabbar/work.png",
					"selectedIconPath": "../../static/images/tabbar/work_.png",
					"text": "子库管理"
				}, {
					"pagePath": "/pages/index",
					"iconPath": "../../static/images/tabbar/home.png",
					"selectedIconPath": "../../static/images/tabbar/home_.png",
					"text": "人员管理"
				},{
					"pagePath": "/pages/pcqd/pcqd_page",
					"iconPath": "../../static/images/tabbar/pcqd.png",
					"selectedIconPath": "../../static/images/tabbar/pcqd_.png",
					"text": "排查清单"
				},
				{
					"pagePath": "/pages/bgqd/index",
					"iconPath": "../../static/images/tabbar/bgqd.png",
					"selectedIconPath": "../../static/images/tabbar/bgqd_.png",
					"text": "报告清单"
				}, {
					"pagePath": "/pages/mine/index",
					"iconPath": "../../static/images/tabbar/mine.png",
					"selectedIconPath": "../../static/images/tabbar/mine_.png",
					"text": "我的"
				}]
			}
			// 排查人
			else {
				_this.list = [{
					"pagePath": "/pages/pcqd/pcqd_page",
					"iconPath": "../../static/images/tabbar/pcqd.png",
					"selectedIconPath": "../../static/images/tabbar/pcqd_.png",
					"text": "排查清单"
				}, {
					"pagePath": "/pages/mine/index",
					"iconPath": "../../static/images/tabbar/mine.png",
					"selectedIconPath": "../../static/images/tabbar/mine_.png",
					"text": "我的"
				}]
			}


		},
		methods: {
			switchTab(item, index) {
				console.log("切换导航栏");
				console.log('itme', item)
				console.log('index', index)
				console.log('selectedIndex', this.selectedIndex)

				this.currentIndex = this.selectedIndex;
				let url = item.pagePath;
				console.log(url);
				console.log('currentIndex', this.currentIndex)
				uni.switchTab({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss">
	.tab-bar-container {
		// 容器相对定位，确保占位元素和tab-bar正确定位
		position: relative;
	}

	.tab-bar-placeholder {
		// 占位元素高度与tab-bar一致，用于防止页面内容被遮挡
		height: 180rpx;
	}

	.tab-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 180rpx;
		background: white;
		display: flex;
		justify-content: center;
		align-items: center;
		padding-bottom: env(safe-area-inset-bottom); // 适配iphoneX的底部
		z-index: 999;

		.tab-bar-item {
			flex: 1;
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;

			.tab_img {
				width: 56rpx;
				height: 60rpx;
			}

			.tab_text {
				font-size: 21rpx;
				margin-top: 9rpx;
			}
		}
	}
</style>